﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="echarts.js"></script>
</head>
<body>
	<div id="main" style="width:850px;height:200px;"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));

        var labelTop = {
            normal : {
                label : {
                    show : true,
                    position : 'center',
                    formatter : '{b}',
                    textStyle: {
                        baseline : 'bottom'
                    }
                },
                labelLine : {
                    show : false
                }
            }
        };
        var labelFromatter = {
            normal : {
                label : {
                    formatter : function (params){
                        return 100 - params.value + '%'
                    },
                    textStyle: {
                        baseline : 'top'
                    }
                }
            },
        }
        var labelBottom = {
            normal : {
                color: '#ccc',
                label : {
                    show : true,
                    position : 'center'
                },
                labelLine : {
                    show : false
                }
            }
        };

        var radius = [40, 55];
        var name = '';
		var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                y : 'bottom',
                data:['GoogleMaps','Facebook','Youtube','Weixin','Whatsapp','others']
            },
            series: [
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['10%', '30%'],
                    
                    data:[
                        {value:335, name:'others',itemStyle:labelBottom},
                        {value:310, name:'GoogleMaps',itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['30%', '30%'],
                    
                    data:[
                        {value:335, name:'others',itemStyle:labelBottom},
                        {value:310, name:'Facebook',itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['50%', '30%'],
                    
                    data:[
                        {name:'others',value:335, itemStyle:labelBottom},
                        {name:'Whatsapp',value:310, itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['70%', '30%'],
                    
                    data:[
                        {value:335, name:'others',itemStyle:labelBottom},
                        {value:310, name:'Youtube',itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['90%', '30%'],
                    data:[
                        {value:335, name:'others',itemStyle:labelBottom},
                        {value:310, name:'Weixin',itemStyle:labelTop}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>